import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/ui/custom_popup.dart';
import 'package:life_service/ui/draw_under_line.dart';
import 'package:life_service/utils/styles.dart';
import 'controller.dart';

class HotelOrderPage extends GetView<HotelOrderController> {
  const HotelOrderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(HexColor.colorF2f2),
      appBar: AppBar(
        backgroundColor: Colors.white,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        leadingWidth: 300,
        leading: TextButton(
          onPressed: Get.back,
          child: Text.rich(
            TextSpan(
              children: [
                const WidgetSpan(
                  child: Icon(
                    CupertinoIcons.chevron_back,
                    size: 18,
                    color: Colors.black,
                  ),
                ),
                TextSpan(
                  text: ' 贯通现代酒店（北京前门店）',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize16,
                    color: HexColor.color3333,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(
            vertical: 15, horizontal: (Get.width - 334) / 2),
        child: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer,
                    color: HexColor.rgba(204, 204, 204, 0.4),
                  )
                ],
              ),
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 12),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '经济双人房（无窗）',
                        style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333),
                      ),
                      Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '房型详情 ',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.colorFf62,
                              ),
                            ),
                            WidgetSpan(
                              child: Icon(
                                CupertinoIcons.chevron_right,
                                size: 10,
                                color: HexColor(HexColor.color9999),
                              ),
                              alignment: PlaceholderAlignment.middle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.symmetric(vertical: 8),
                    child: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: '12月18日 ',
                            style: StylesUtils.customTextStyle(
                              fontWeight: FontWeight.w700,
                              color: HexColor.color3333,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                          TextSpan(
                            text: '入住    ',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.color9999,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                          TextSpan(
                            text: '12月19日 ',
                            style: StylesUtils.customTextStyle(
                              fontWeight: FontWeight.w700,
                              color: HexColor.color3333,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                          TextSpan(
                            text: '离店    ',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.color9999,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                          TextSpan(
                            text: ' 共1晚',
                            style: StylesUtils.customTextStyle(
                              fontWeight: FontWeight.w700,
                              color: HexColor.color3333,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '双床  无窗  最多可住2人  ',
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize12,
                        color: HexColor.color9999,
                      ),
                    ),
                  ),
                  Divider(
                    height: 20,
                    thickness: 1,
                    indent: 0,
                    endIndent: 0,
                    color: HexColor(HexColor.colorF2f2),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '今天12点前可取消',
                        style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize12,
                            color: HexColor.color3333),
                      ),
                      Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '房型详情 ',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.colorFf62,
                              ),
                            ),
                            WidgetSpan(
                              child: Icon(
                                CupertinoIcons.chevron_right,
                                size: 10,
                                color: HexColor(HexColor.color9999),
                              ),
                              alignment: PlaceholderAlignment.middle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer,
                    color: HexColor.rgba(204, 204, 204, 0.4),
                  )
                ],
              ),
              padding: const EdgeInsets.symmetric(vertical: 15),
              child: Column(
                children: [
                  Container(
                    padding:
                        const EdgeInsets.only(top: 5, bottom: 15, left: 15),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '入住信息',
                      style: StylesUtils.customTextStyle(
                        fontWeight: FontWeight.w700,
                        color: HexColor.color3333,
                        fontSize: StylesUtils.fontSize16,
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: Container(
                      padding: const EdgeInsets.only(bottom: 10, right: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '房间数量',
                              style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999),
                            ),
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '2间',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color3333,
                                ),
                              ),
                            ),
                          ),
                          Icon(
                            CupertinoIcons.chevron_right,
                            size: 12,
                            color: HexColor(HexColor.color9999),
                          ),
                        ],
                      ),
                    ),
                  ).paddingOnly(left: 15),
                  DrawUnderLine(
                    child: Container(
                      padding:
                          const EdgeInsets.only(bottom: 10, top: 10, right: 20),
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '住客姓名',
                              style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999),
                            ),
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                TextField(
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.color3333,
                                  ),
                                  decoration: InputDecoration(
                                    hintText: '入住人姓名',
                                    hintStyle: StylesUtils.customTextStyle(
                                      color: HexColor.color9999,
                                    ),
                                    border: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    constraints: const BoxConstraints.expand(
                                        width: 137, height: 30),
                                    contentPadding: const EdgeInsets.symmetric(
                                        vertical: 10, horizontal: 5),
                                    isCollapsed: true,
                                    isDense: true,
                                  ),
                                ),
                                Divider(
                                  height: 10,
                                  thickness: 1,
                                  endIndent: 0,
                                  indent: 0,
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                                TextField(
                                  style: StylesUtils.customTextStyle(
                                    color: HexColor.color3333,
                                  ),
                                  decoration: InputDecoration(
                                    hintText: '入住人姓名',
                                    hintStyle: StylesUtils.customTextStyle(
                                      color: HexColor.color9999,
                                    ),
                                    border: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    constraints: const BoxConstraints.expand(
                                        width: 137, height: 30),
                                    contentPadding: const EdgeInsets.symmetric(
                                        vertical: 10, horizontal: 5),
                                    isCollapsed: true,
                                    isDense: true,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: 40,
                            alignment: Alignment.centerRight,
                            child: Icon(
                              CupertinoIcons.person,
                              size: 20,
                              color: HexColor(HexColor.color666e),
                            ),
                          )
                        ],
                      ),
                    ),
                  ).paddingOnly(left: 15),
                  DrawUnderLine(
                    child: Container(
                      padding:
                          const EdgeInsets.only(bottom: 10, top: 10, right: 20),
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '手机号码',
                              style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999),
                            ),
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: TextField(
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color0000,
                                ),
                                decoration: InputDecoration(
                                  hintText: '18854349088',
                                  hintStyle: StylesUtils.customTextStyle(
                                    color: HexColor.color9999,
                                  ),
                                  border: InputBorder.none,
                                  focusedBorder: InputBorder.none,
                                  constraints: const BoxConstraints.expand(
                                      width: 250, height: 30),
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 5),
                                  isCollapsed: true,
                                  isDense: true,
                                  prefixIcon: Container(
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(
                                      TextSpan(
                                        children: [
                                          TextSpan(
                                            text: '+86 ',
                                            style: StylesUtils.customTextStyle(
                                              color: HexColor.color6666,
                                            ),
                                          ),
                                          WidgetSpan(
                                            child: Icon(
                                              CupertinoIcons.chevron_down,
                                              size: 12,
                                              color:
                                                  HexColor(HexColor.color9999),
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  prefixIconConstraints:
                                      const BoxConstraints.expand(
                                          width: 60, height: 30),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ).paddingOnly(left: 15),
                  Container(
                    padding:
                        const EdgeInsets.only(left: 15, top: 10, right: 20),
                    child: Row(
                      children: [
                        Container(
                          width: 70,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '预计到店',
                            style: StylesUtils.customTextStyle(
                                color: HexColor.color9999),
                          ),
                        ),
                        Expanded(
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '22:00',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                        ),
                        Icon(
                          CupertinoIcons.chevron_right,
                          size: 12,
                          color: HexColor(HexColor.color9999),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer,
                    color: HexColor.rgba(204, 204, 204, 0.4),
                  )
                ],
              ),
              padding: const EdgeInsets.symmetric(vertical: 15),
              child: Column(
                children: [
                  Container(
                    padding:
                        const EdgeInsets.only(top: 5, bottom: 15, left: 15),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '优惠',
                      style: StylesUtils.customTextStyle(
                        fontWeight: FontWeight.w700,
                        color: HexColor.color3333,
                        fontSize: StylesUtils.fontSize16,
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 15, right: 20),
                    child: Row(
                      children: [
                        Container(
                          width: 70,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '优惠券',
                            style: StylesUtils.customTextStyle(
                                color: HexColor.color9999),
                          ),
                        ),
                        Expanded(
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              constraints: const BoxConstraints.expand(
                                  width: 86, height: 30),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(4),
                                  color: HexColor.rgba(
                                      255, 98, 98, 0.0980392156862745)),
                              child: Text(
                                '满200减30',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.colorFf62,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: '已选择 ',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.colorFf62,
                                ),
                              ),
                              WidgetSpan(
                                  child: Icon(
                                    CupertinoIcons.chevron_right,
                                    size: 12,
                                    color: HexColor(HexColor.color9999),
                                  ),
                                  alignment: PlaceholderAlignment.middle),
                            ],
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20, bottom: 30),
              child: Column(
                children: [
                  Center(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 86,
                          height: 1,
                          color: HexColor(HexColor.colorCccc),
                        ),
                        Container(
                          alignment: Alignment.center,
                          child: Text(
                            '1000万安心保障',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.colorCccc,
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                        ).expand(),
                        Container(
                          width: 86,
                          height: 1,
                          color: HexColor(HexColor.colorCccc),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.only(bottom: 40),
              child: Text(
                '放心住',
                style: StylesUtils.customTextStyle(
                  fontSize: StylesUtils.fontSize20,
                  color: HexColor.colorFf62,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ],
        ),
      ),
      extendBody: true,
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Builder(builder: (c) {
          return Container(
            height: 70,
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              children: [
                Text(
                  '¥230.00 ',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize24,
                    color: HexColor.colorFf62,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: '明细 ',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize12,
                              color: HexColor.colorFf62,
                            ),
                          ),
                          WidgetSpan(
                              child: Icon(
                                CupertinoIcons.chevron_down,
                                size: 12,
                                color: HexColor(HexColor.color9999),
                              ),
                              alignment: PlaceholderAlignment.middle),
                        ],
                      ),
                    ).onTap(() {
                      openPopup(c);
                    }),
                  ),
                ),
                TextButton(
                  onPressed: () {
                    Get.toNamed(Routes.hotelPay);
                  },
                  style: ButtonStyle(
                    fixedSize: const WidgetStatePropertyAll(Size(145, 40)),
                    maximumSize: const WidgetStatePropertyAll(Size(145, 40)),
                    backgroundColor:
                        WidgetStatePropertyAll(HexColor(HexColor.colorFf62)),
                    foregroundColor:
                        const WidgetStatePropertyAll(Colors.transparent),
                    alignment: Alignment.center,
                    shape: WidgetStatePropertyAll(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                  ),
                  child: Text(
                    '提交订单',
                    style: StylesUtils.customTextStyle(
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              ],
            ),
          );
        }),
      ),
    );
  }

  void openPopup(BuildContext context) {
    showPopup(
        context: context,
        builder: (_) {
          return Container(
            height: 285,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(36),
                topRight: Radius.circular(36),
              ),
              color: Colors.white,
            ),
            child: SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: Column(
                children: [
                  Stack(
                    children: [
                      Container(
                        height: 50,
                        alignment: Alignment.center,
                        child: Text(
                          '明细',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            color: HexColor.color3333,
                          ),
                        ),
                      ),
                      Positioned(
                        width: 40,
                        top: 0,
                        right: 0,
                        bottom: 0,
                        child: Center(
                          child: Icon(
                            CupertinoIcons.multiply,
                            size: 20,
                            color: HexColor(HexColor.colorCccc),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    decoration: BoxDecoration(
                      border: Border(
                        top: BorderSide(
                          color: HexColor(HexColor.colorCccc),
                        ),
                        bottom: BorderSide(
                          color: HexColor(HexColor.colorCccc),
                        ),
                      ),
                    ),
                    child: Column(
                      children: [
                        SizedBox(
                          height: 40,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '房费',
                                style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: HexColor.color3333,
                                ),
                              ),
                              Text(
                                '￥2000.00',
                                style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: HexColor.color3333,
                                ),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 40,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '2023-11-19',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                              Text(
                                '2*1000.00',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          color: HexColor(HexColor.colorCccc),
                        ),
                      ),
                    ),
                    child: Column(
                      children: [
                        SizedBox(
                          height: 40,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '优惠',
                                style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: HexColor.color3333,
                                ),
                              ),
                              Text(
                                '￥20.00',
                                style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: HexColor.color3333,
                                ),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 40,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '2023-11-19',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                              Text(
                                '-20.00',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: 50,
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '总价',
                          style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                          ),
                        ),
                        Text(
                          '￥1980.00',
                          style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

  void showPopup(
      {required BuildContext context,
      required WidgetBuilder builder,
      double? elevation,
      Color? shadowColor,
      Duration animationDuration = const Duration(milliseconds: 200)}) {
    final RenderBox button = context.findRenderObject()! as RenderBox;
    final RenderBox overlay =
        Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;
    Offset offset = Offset(0.0, button.size.height);
    // Rect.fromLTRB(0.0, 802.9, 392.7, 872.9)
    debugPrint('pos = ${Rect.fromPoints(
      button.localToGlobal(offset, ancestor: overlay),
      button.localToGlobal(button.size.bottomRight(Offset.zero) + offset,
          ancestor: overlay),
    )}');
    RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(
        button.localToGlobal(offset, ancestor: overlay),
        button.localToGlobal(button.size.bottomRight(Offset.zero) + offset,
            ancestor: overlay),
      ),
      Offset.zero & overlay.size,
    );
    Navigator.of(context).push(
      CustomPopupRoute(
          position: position,
          builder: builder,
          elevation: elevation,
          shadowColor: shadowColor,
          animationDuration: animationDuration,
          barrierLabel:
              MaterialLocalizations.of(context).modalBarrierDismissLabel),
    );
  }
}
